<!-- {{getConsoleTabs()|json}} -->
<nz-tabset
  [(nzSelectedIndex)]="tabOperate.selectedIndex"
  nzType="editable-card"
  [nzHideAdd]="true"
  [nzCanDeactivate]=" canDeactivate"
  (nzSelectChange)="selectChange($event)"
  [nzTabBarExtraContent]="extraTemplate"
>
  <nz-tab *ngFor="let uuid of tabStorage.tabOrder; let i = index" [nzTitle]="titleTemplate">
    <ng-template #titleTemplate>
      <div
        class="flex items-center tab-item-container"
        [ngClass]="{ 'fixed-tab-item-container': tabStorage.tabsByID.get(uuid).isFixed }"
      >
        <!-- loading -->
        <nz-spin nzSimple class="mr10" [nzSize]="'small'" *ngIf="tabStorage.tabsByID.get(uuid).isLoading"></nz-spin>
        <eo-iconpark-icon
          class="mr5"
          name="{{ tabStorage.tabsByID.get(uuid).icon }}"
          size="14px"
          *ngIf="tabStorage.tabsByID.get(uuid).icon"
        ></eo-iconpark-icon>
        <span
          class="mr5 method-text method_text_{{ tabStorage.tabsByID.get(uuid).extends.method }}"
          *ngIf="tabStorage.tabsByID.get(uuid).extends?.method"
          >{{ tabStorage.tabsByID.get(uuid).extends.method }}</span
        >
        <span class="text_omit tab_text" [title]="tabStorage.tabsByID.get(uuid).title">
          {{ tabStorage.tabsByID.get(uuid).title }}</span
        >
        <!-- Close/HasEdit -->
        <div class="flex items-center tab-item-button-group">
          <span class="tab-has-edit-icon eo-tab-theme-icon" *ngIf="tabStorage.tabsByID.get(uuid).hasChanged"></span>
          <button
            aria-label="Close tab"
            (click)="closeTab({ $event: $event, index: i, tab: tabStorage.tabsByID.get(uuid) })"
            type="button"
            nz-tab-close-button=""
            class="ant-tabs-tab-remove"
          ></button>
        </div>
      </div>
    </ng-template>
  </nz-tab>
</nz-tabset>
<ng-template #extraTemplate>
  <button
    (click)="newTab()"
    nz-dropdown
    [nzDropdownMenu]="addMenu"
    class="ant-tabs-nav-add {{ tabStorage.tabOrder.length >= MAX_TAB_LIMIT ? 'hidden' : '' }}"
  >
    <eo-iconpark-icon name="plus" size="16px"></eo-iconpark-icon>
  </button>
  <nz-dropdown-menu #addMenu="nzDropdownMenu">
    <ul nz-menu>
      <li nz-menu-item (click)="newTab()">HTTP</li>
      <li nz-menu-item (click)="newTab('/home/api/ws/test')">Websocket</li>
    </ul>
  </nz-dropdown-menu>
  <a nz-dropdown  [nzDropdownMenu]="menu">
    <button class="ant-tabs-nav-more"><eo-iconpark-icon class="mr5" name="more" size="16px"></eo-iconpark-icon></button>
  </a>
  <nz-dropdown-menu #menu="nzDropdownMenu">
    <ul nz-menu>
      <li nz-menu-item (click)="closeTabByOperate('closeOther')" [nzDisabled]="tabStorage.tabOrder.length === 1" i18n>
        Close Other Tags (excluding current tabs)
      </li>
      <li nz-menu-item (click)="closeTabByOperate('closeAll')" i18n>Close All Tabs</li>
      <li nz-menu-item (click)="closeTabByOperate('closeLeft')" [nzDisabled]="tabOperate.selectedIndex === 0" i18n>
        Close Tabs To the Left
      </li>
      <li
        nz-menu-item
        [nzDisabled]="tabStorage.tabOrder.length - 1 === tabOperate.selectedIndex"
        (click)="closeTabByOperate('closeRight')"
        i18n
      >
        Close Tabs to the Right
      </li>
    </ul>
  </nz-dropdown-menu>
</ng-template>
